<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
    <meta content="webkit" name="renderer">

    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

    <link href="layui-v2.6.4/layui/css/modules/code.css" rel="stylesheet" type="text/css"/>
    <link href="/layui-v2.6.4/layui/css/layui.css" media="all" rel="stylesheet">
    <script charset="UTF-8" src="/js/jquery-3.5.1.min.js"></script>
</head>
<script charset="utf-8" src="/layui-v2.6.4/layui/layui.js"></script>

<body>


<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div class="layui-btn-container">
    <button th:if="${s.equals('root')}" class="layui-btn layui-btn-sm" lay-event="getCheckData">
        <b id="super" th:onclick="do1('super')" value="super">super管理员</b>
    </button>
    <button th:if="${s.equals('root')}" class="layui-btn layui-btn-sm" lay-event="getCheckLength">
        <b value="unfinished" th:onclick="do1('unfinished')">unfinished管理员</b></button>
    <button th:if="${s.equals('super')}" class="layui-btn layui-btn-sm" lay-event="isAll">
        <b value="unfinished" th:onclick="do1('unfinished')">unfinished管理员</b></button>
</div>
<div class="layui-container" id="main" style="height:500px;"></div>
<script>
    $(function () {
        do1('unfinished');
    })
</script>

<script type="text/javascript">

    function do1(str) {
        $.ajax({
            url: "/sysGraph1"
            , type: 'get'
            , async: false
            , data: {
                name: str
            }
            , success: function (str) {
                var myChart = echarts.init(document.getElementById('main'));

                myChart.setOption({
                    title: {
                        text: '管理员操作分布图',
                        subtext: '实时数据',
                        left: 'center'
                    },tooltip: {
                        trigger: 'item'
                    },legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '登录次数',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data:
                                JSON.parse(str),
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 40,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            }
        })
    }
</script>
</body>
</html>